/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, useTheme, TableFoot, TableHead, CCell, Cell, Table, TableBody, TableRow,} from "customize-easy-ui-component";
import {DirectLink} from "../../routing/Link";

/**【通用】的附页的附加图;   部分参数可定做。比如：
 * @property mendtCB :人员 和日期注入，回调函数 必须返回 [检验, 日期1,审核, 日期2];
 * @property inter : 表头左上角的位置有吗直接上Node;
 * @property cap : 末尾人员条的 最左边抬头。
 * */
export const AttachedFigureVw= ({orc, rep,title,cap,memc,id='AttachedFigure',inter,mendtCB}
    :{orc:any, rep:any; title:string,cap?:string,memc?:string,id?:string,inter?:any, mendtCB:(orc:any,rep:any) => React.ReactNode[]; }
) => {
  const theme= useTheme();
  //【表格】 【助手】  JSON.parse(orc?._tblFixed??'[]')  【工具】
  const mends =React.useMemo(() => {
    return mendtCB(orc,rep);
  }, [orc,rep,mendtCB]);
  return <>
    <div id={id} css={{marginTop: '1rem', "@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
    </div>
    <Table fixed={ ["62%","%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight  miniw={800}>
      <TableHead>
        <TableRow>
          <CCell colSpan={2}  css={{border:'none'}}>
            <div css={{"@media print": { pageBreakInside: 'avoid'}}}>
              <Text id='AttachInspect1' variant="h2" css={{
                textAlign: 'center',
              }}>{title}</Text>
              <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <div>{inter}</div>
                <Text>报告编号：{rep.isp.no}</Text>
              </div>
            </div>
          </CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <DirectLink
            href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/${id}#${id}`}>
          <TableRow>
            <Cell colSpan={2} split={true}
                  css={{"@media print": {height: undefined}, padding: 0}}>
              {orc?.示图说明 &&
                  <div css={{whiteSpace: 'pre-wrap'}}>
                    {memc??'缺陷附图或说明'}：<br/>
                    {orc?.示图说明}
                  </div>
              }

              {orc?._FILE_S部位?.map(({name, url}: any, i: number) => {
                return <div key={i} css={{"@media print": {pageBreakInside: 'avoid'}}}>
                  {i > 0 && <hr/>}
                  <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',}}>
                    {url &&
                        <img src={process.env.REACT_APP_OSS_ENDP + url} alt={url}
                             css={{
                               maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                               maxWidth: '-webkit-fill-available',
                               [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                               "@media print": {maxHeight: '86vh', maxWidth: '100%'},        //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                             }}
                        />
                    }
                  </div>
                </div>
              })}
              { !orc?.示图说明 && !(orc?._FILE_S部位?.length>0) &&
                  <Text variant="h2" css={{textAlign:'center',}}>
                    还未初始化或上传！
                  </Text>
              }
            </Cell>
          </TableRow>
        </DirectLink>
      </TableBody>
      <TableFoot>
        <TableRow>
          <CCell>
            <div css={{
              height: '100%',
              display: 'flex',
              justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
            <div><Text>{cap??'检验'}：</Text> {mends[0]}</div>
            <div css={{textAlign: 'end'}}><Text >日期</Text>{mends[1]}</div>
          </div></CCell>
          <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
            <div><Text >审核：</Text> {mends[2]}</div>
            <div css={{textAlign: 'end'}}><Text >日期</Text>{mends[3]}</div>
          </div></CCell>
        </TableRow>
      </TableFoot>
    </Table>
  </>;
};

